<div class="layui-card">
  <div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;line-height: 50px;">
    <a lay-href="">概览</a>
    <a><cite>报表中心</cite></a>
    <a><cite lay-href="report/custom">自定义报表</cite></a>
    <a><cite>报表设计</cite></a>
  </div>
  <div class="luomi-title" style="margin-top: 10px;margin-left: -60px; display: flex;justify-content: center;"></div>
</div>

<!-- <div style="margin-top:30px;" class="container"> -->
<div id="spreadsheet" style="margin-left: 50%;transform: translateX(-50%);"></div>
<!-- </div> -->



<!-- 单行数据点 -->
<script type="text/html" template lay-done="layui.data.checkData(d.params)">
</script>

<style>
  html {
    background: #F4F5F8;
  }
</style>

<script>
  layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view',
    'setter', 'upload'
  ], function () {
    var $ = layui.$,
      admin = layui.admin,
      table = layui.table,
      laytpl = layui.laytpl,
      form = layui.form,
      laypage = layui.laypage,
      layer = layui.layer,
      view = layui.view,
      setter = layui.setter,
      tipsIndex = null;
    // treeData = null;



    layui.data.checkData = function () {
      var data = layui.data('customItem-data').data
      $('.luomi-title').text(data.reporttitle + '设计' + "   id:" + data.id)

      layui.data('table', {
        key: 'id',
        value: data.id
      })





      // 自定义报表初始化
      admin.req({
        method: 'post',
        url: setter.urlTest + '/customreport/getEnergyCustomreport',
        data: {
          // token: '888833CC22117777999922FF22664499',
          id: data.id
        },
        done: function (res) {
          res = res.jsonObject;
          // var reg = /\"(.*?)\"/g;
          // var s = res.jsonStr
          // var mc = [];
          // while (m = reg.exec(s)) mc.push(m[1]);
          // console.log(mc)
          var col = res.columnnumber ? res.columnnumber : 20
          var row = res.rownumber ? res.rownumber : 24

          // console.log(res.style);
          // console.log(eval('[' + res.style + ']'));


          var selectionActive = function (instance, x1, y1, x2, y2, origin) {
            var cellName1 = jexcel.getColumnNameFromId([x1, y1]);
            var cellName2 = jexcel.getColumnNameFromId([x2, y2]);
            layui.data('table', {
              key: 'data',
              value: {
                cellName1: cellName1,
                col1: x1,
                row1: y1,
                col2: x2,
                row2: y2
              }
            })

            x3 = x1;
            y3 = y1;
            x4 = x2;
            y4 = y2;
            console.log('选中了 ' + cellName1 + ' 至 ' +
              cellName2 + '');
            console.log('选中了' + x1, y1 + '至', x2, y2);
          }

          merge = function () {
            var data = layui.data('table').data
            // console.log(data.cellName1,data.col2-data.col1+1,data.row2-data.row1+1);
            table.setMerge(data.cellName1, data.col2 - data.col1 + 1, data.row2 - data.row1 + 1)
          }

          unMerge = function () {
            // console.log('取消合并');
            var data = layui.data('table').data
            table.removeMerge(data.cellName1)
          }

          borderFull = function () {
            console.log(123);
            for (var i = x3; i <= x4; i++) {
              for (var j = y3; j <= y4; j++) {
                cellName = jexcel.getColumnNameFromId([i, j]);
                var cellstyle = table.getStyle(cellName)
                // table.resetStyle(cellName)
                cellstyle = cellstyle.replace("border-top: 1px solid rgb(0, 0, 0);", "")
                cellstyle = cellstyle.replace("border-left: 1px solid rgb(0, 0, 0);", "")
                cellstyle = cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);", "")
                cellstyle = cellstyle.replace("border-bottom: 1px solid rgb(0, 0, 0);", "")
                cellstyle = cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);", "")
                cellstyle = cellstyle.replace(
                  "border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);", "")
                cellstyle = cellstyle.trim()
                var str = cellstyle.split(";")
                for (var x = 0; x < str.length; x++) {
                  // console.log(temp);
                  var temp = str[x].split(":")
                  if (temp.length > 0 && temp[0] != null && temp[1] != null && temp[0] != "" && temp[1] !=
                    "") {
                    //console.log("borderFull--for--x="+x+" "+temp[0]+" "+temp[1])
                    // table.setStyle(cellName,temp[0].trim(),temp[1].trim())
                    table.setStyle(cellName, 'overflow', 'hidden')
                    // table.setStyle(cellName,'text-overflow','ellipsis')
                  }
                }
                table.setStyle(cellName, 'border-top', '1px solid #000')
                table.setStyle(cellName, 'border-left', '1px solid #000')
                table.setStyle(cellName, 'border-right', '1px solid transparen')
                table.setStyle(cellName, 'border-bottom', '1px solid transparen')
                if (i == x4) {
                  table.setStyle(cellName, 'border-right', '1px solid #000')
                }
                if (j == y4) {
                  table.setStyle(cellName, 'border-bottom', '1px solid #000')
                }
              }
            }
          }

          borderNull = function () {
            //console.log("x3="+x3+" x4="+x4+" y3="+y3+" y4="+y4)
            for (var i = x3; i <= x4; i++) {
              for (var j = y3; j <= y4; j++) {
                cellName = jexcel.getColumnNameFromId([i, j]);
                var cellstyle = table.getStyle(cellName)
                // console.log("cellstyle="+cellstyle)
                // table.setStyle(cellName,cellstyle)
                // console.log(cellstyle);
                // cellstyle=cellstyle.replace("border-top: 1px solid rgb(0, 0, 0);","")
                // cellstyle=cellstyle.replace("border-left: 1px solid rgb(0, 0, 0);","")
                // cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                // cellstyle=cellstyle.replace("border-bottom: 1px solid rgb(0, 0, 0);","")
                // cellstyle=cellstyle.replace("border-right: 1px solid rgb(0, 0, 0);","")
                // cellstyle=cellstyle.replace("border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);","")
                cellstyle = cellstyle.trim()
                //console.log("cellstyle="+cellstyle)
                var str = cellstyle.split(";")
                for (var x = 0; x < str.length; x++) {
                  var temp = str[x].split(":")
                  if (temp.length > 0 && temp[0] != null && temp[1] != null && temp[0] != "" && temp[1] !=
                    "") {
                    console.log(temp[0]);
                    if (temp[0].trim() == 'border-top' || temp[0].trim() == 'border-left' || temp[0]
                      .trim() == 'border-right' || temp[0].trim() == 'border-bottom' || temp[0].trim() ==
                      'border-style' || temp[0].trim() == 'border-color' || temp[0].trim() ==
                      'border-width') {
                      console.log(123);
                      //console.log("for="+temp[0] +":"+ temp[1])
                      table.setStyle(cellName, temp[0].trim(), temp[1].trim())
                    }
                  }
                }
              }
            }
          }

          table = jspreadsheet(document.getElementById('spreadsheet'), {
            data: [],
            minDimensions: [col, row],
            tableOverflow: true,
            tableWidth: "1055px",
            tableHeight: "auto",
            rowResize: true,
            columnDrag: true,

            // 选择事件
            onselection: selectionActive,
            toolbar: [{
                type: 'i',
                content: 'save',
                onclick: function () {
                  var token = layui.data('layuiAdmin').token
                  var id = layui.data('table').id
                  var rows = table.getJson().length
                  var columns = Object.getOwnPropertyNames(table.getJson()[0]).length
                  var rowheightArr = [];
                  for (var i = 0; i < rows; i++) {
                    if (i <= table.getHeight().length - 1 && table.getHeight()[i] !== undefined) {
                      rowheightArr[i] = table.getHeight()[i].replace("px", "")
                    } else {
                      rowheightArr[i] = null
                    }
                  }
                  var rowheight = "["
                  for (var i = 0; i < rowheightArr.length; i++) {
                    if (rowheightArr[i] === null) {
                      rowheight = rowheight + 'null' + ','
                    } else {
                      rowheight = rowheight + rowheightArr[i] + ','
                    }
                  }
                  rowheight = rowheight.substr(0, rowheight.length - 1) + ']'


                  var columnwidthArr = [];
                  for (var i = 0; i < columns; i++) {
                    if (i <= table.getWidth().length - 1 && table.getWidth()[i] !== undefined) {
                      columnwidthArr[i] = (table.getWidth()[i] + '').replace("px", "")
                    } else {
                      columnwidthArr[i] = null
                    }
                  }
                  var columnwidth = "["
                  for (var i = 0; i < columnwidthArr.length; i++) {
                    if (columnwidthArr[i] === null) {
                      columnwidth = columnwidth + 'null' + ','
                    } else {
                      columnwidth = columnwidth + columnwidthArr[i] + ','
                    }
                  }
                  columnwidth = columnwidth.substr(0, columnwidth.length - 1) + ']'





                  var merge = "{"
                  for (key in table.getMerge()) {
                    var cell = jexcel.getIdFromColumnName(key, true)
                    merge = merge + table.getMerge()[key][0] + "|" + table.getMerge()[key][1] +
                      "|" + cell[0] + "|" + cell[1] + ","
                  }
                  merge = merge.substr(0, merge.length - 1) + "}"

                  // data
                  var data = ""
                  for (var i = 0; i < rows; i++) {
                    for (var j = 0; j < columns; j++) {
                      // console.log(table.getJson()[i][j]);
                      if (table.getData()[i][j] !== "") {
                        data = data + table.getData()[i][j] + "|" + j + "|" + i + ","
                      }
                    }
                  }
                  data = data.substr(0, data.length - 1)
                  var style = "{"
                  var getStyle = table.getStyle();
                  for (var i = 0; i < columns; i++) {
                    for (var j = 0; j < rows; j++) {
                      style = style + getStyle[jexcel.getColumnNameFromId([i, j])] + "|" + i + "|" +
                        j + '，'
                    }
                  }
                  style = style.substr(0, style.length - 1) + "}"



                  // console.log(table.getStyle());
                  // console.log(jexcel.getIdFromColumnName("A1",true));
                  admin.req({
                    method: 'post',
                    url: setter.urlTest + 'customreport/SaveEnergyCustomreport',
                    data: {
                      // token: '888833CC22117777999922FF22664499',
                      id: id,
                      data: data,
                      style: style,
                      merge: merge,
                      columnwidth: columnwidth,
                      rowheight: rowheight,
                      columns: columns,
                      rows: rows,
                      remark: null,
                    },
                    done: function (res) {
                      layer.msg(res.message)
                    }
                  })
                }
              },
              {
                type: 'i',
                content: 'edit',
                onclick: function (dom, options) {
                  admin.popup({
                    title: '单元格内容修改',
                    area: ['1200px', '650px'],
                    id: 'LAY-app_popup_computer',
                    success: function (layero,
                      index) {
                      view(this.id).render(
                        '/report/customPopup-computer', {
                          index: options.selectedContainer,
                          // treeData
                        }
                      ).done(function () {
                        form.on('submit(formDemo)',
                          data => {
                            // console.log(data.field.title);
                            // 表格更新
                            table.setValueFromCoords(options.selectedContainer[0],
                              options.selectedContainer[1], '≡' + data.field.title)
                            layer.close(index)
                          })
                      })

                    }
                  })
                }
              },
              {
                type: 'i',
                content: 'merge-cells',
                onclick: merge
              },
              {
                type: 'i',
                content: 'solit-cells',
                onclick: unMerge
              },
              {
                type: 'i',
                content: 'jurassic_border-all',
                onclick: borderFull,
              },
              {
                type: 'i',
                content: 'jurassic_border-none',
                onclick: borderNull
              },
              {
                // 插入行(当前行下方)
                type: 'i',
                content: 'insertrowbelow',
                onclick: function (el, o) {
                  table.insertRow(1, o.selectedContainer[1])
                }
              },
              {
                // 插入行(当前行上方)
                type: 'i',
                content: 'insertrowabove',
                onclick: function (el, o) {
                  if (o.selectedContainer[1] - 1 < 0) {
                    table.insertRow(1, 0, 1)
                  } else {
                    table.insertRow(1, o.selectedContainer[1] - 1)
                  }
                }
              },
              {
                // 插入列(当前列右侧)
                type: 'i',
                content: 'insertrowright',
                onclick: function (el, o) {
                  console.log(o.selectedContainer);
                  table.insertColumn(1, o.selectedContainer[0])
                }
              },
              {
                // 插入列(当前列左侧)
                type: 'i',
                content: 'insertrowleft',
                onclick: function (el, o) {
                  if (o.selectedContainer[0] - 1 < 0) {
                    table.insertColumn(1, 0, 1)
                  } else {
                    table.insertColumn(1, o.selectedContainer[0] - 1)
                  }
                }
              },
              {
                type: 'i',
                content: 'deleterow',
                onclick: function (dom, option) {
                  var rowNumber = option.selectedContainer[1]
                  var numOfRows = option.selectedContainer[3] - option.selectedContainer[1] + 1
                  table.deleteRow(rowNumber, numOfRows)
                  // console.log(table.getData());
                }
              },
              {
                type: 'i',
                content: "deletecolumn",
                onclick: function (dom, option) {
                  var columnNumber = option.selectedContainer[0]
                  var numOfColumns = option.selectedContainer[2] - option.selectedContainer[0] + 1
                  table.deleteColumn(columnNumber, numOfColumns)
                  console.log(table.getData());
                }
              },
              {

                type: 'i',
                content: 'chexiao',
                onclick: function () {
                  table.undo();
                }
              },
              {
                type: 'i',
                content: 'zhongzuo',
                onclick: function () {
                  table.redo();
                }
              },

              {
                type: 'select',
                k: 'font-size',
                v: ['9px', '10px', '11px', '12px', '13px', '14px',
                  '15px', '16px', '17px', '18px', '19px',
                  '20px'
                ]
              },
              {
                type: 'i',
                content: 'align-right',
                k: 'text-align',
                v: 'left'
              },
              {
                type: 'i',
                content: 'align-center',
                k: 'text-align',
                v: 'center'
              },
              {
                type: 'i',
                content: 'align-left',
                k: 'text-align',
                v: 'right'
              },
              {
                type: 'i',
                content: 'bold',
                k: 'font-weight',
                v: 'bold'
              },
              {
                type: 'color',
                content: 'font-colors',
                k: 'color'
              },
              {
                type: 'color',
                content: 'bg-colors',
                k: 'background-color'
              }
            ],
            // 设置列宽

          })
          // 设置列宽
          if (res.columnnumber) {
            var width = res.width.substring(1, res.width.length - 1).split(',')
            layui.each(width, function (index, item) {
              if (item !== 'null') {
                table.setWidth(index, item)
              }
            })

            // 设置行高
            var height = res.height.substring(1, res.height.length - 1).split(',')
            layui.each(height, function (index, item) {
              if (item !== 'null') {
                table.setHeight(index, item)
              }
            })

            // 合并单元格
            var merge = res.merge.substring(1, res.merge.length - 1).split(',')
            if (merge[0] !== "}") {
              layui.each(merge, function (index, item) {
                item = item.split('|')
                table.setMerge(jexcel.getColumnNameFromId([item[2],
                    item[3]
                  ]),
                  item[0] - '0', item[1] - '0');
              })
            }

            // 更新单元格取值
            if (res.value != '') {
              var value = res.value.split(',')
              layui.each(value, function (index, item) {
                let item_cell = item.split('|')
                var item_cell_content = ''
                if (item_cell.length > 3) {
                  for (let i = 0; i <= item_cell_length - 3; i++) {
                    item_cell_content += item_cell[i]
                  }
                } else {
                  item_cell_content = item_cell[0]
                }
                item_cell_row = item_cell[item_cell.length - 1];
                item_cell_col = item_cell[item_cell.length - 2];


                table.setValueFromCoords(item_cell_col, item_cell_row,
                  item_cell_content)
              })
            }


          }

          // console.log(table.getStyle());

          // // 设置表格样式
          var styleMap = new Map();
          if (res.style != null && res.style != "") {
            var style = res.style.replace("{", "")
            style = style.replace("}", "")
            // console.log(style);
            var style = style.split("，")
            // console.log(style);
            for (var i = 0; i < style.length; i++) {
              var str = style[i].split("|")
              //   console.log(str);
              cellName = jexcel.getColumnNameFromId([str[1], str[2]]);
              //   console.log(cellName+" "+str[1]+str[2]+str[0])
              var stylepm = str[0].split(";")
              //   console.log(stylepm);
              for (var j = 0; j < stylepm.length - 1; j++) {
                var kv = stylepm[j].split(":")
                // table.setStyle(cellName,kv[0].trim(),kv[1].trim())
                if (kv.length > 0 && kv[0] != null && kv[1] != null && kv[0] != "" && kv[1] != "") {
                  //console.log(cellName+"=("+kv[0].trim()+")"+":("+kv[1].trim()+")")
                  if (kv[0].trim() == "border-top") {
                    table.setStyle(cellName, 'border-top', '1px solid #000')
                  } else if (kv[0].trim() == "border-left") {
                    table.setStyle(cellName, 'border-left', '1px solid #000')
                  } else if (kv[0].trim() == "border-right") {
                    table.setStyle(cellName, 'border-right', '1px solid #000')
                  } else if (kv[0].trim() == "border-bottom") {
                    table.setStyle(cellName, 'border-bottom', '1px solid #000')
                  } else if (kv[0].trim() == "border-width") {
                    //console.log("kv[0].trim()=="+kv[0].trim())
                    table.setStyle(cellName, 'border-top', '1px solid #000')
                    table.setStyle(cellName, 'border-left', '1px solid #000')
                    table.setStyle(cellName, 'border-right', '1px solid #000')
                    table.setStyle(cellName, 'border-bottom', '1px solid #000')
                  } else if (kv[0].trim() == "background-color" || kv[0].trim() == "color" || (kv[0]
                      .trim() == 'text-align' && kv[1].trim() != 'center') || kv[0].trim() ==
                    'font-weight' ||
                    kv[0].trim() == 'font-size') { //颜色
                    // console.log(cellName,kv);  // 当前要加样式的单元格编号 要加的样式:[什么样式,值]
                    var flag = 0;
                    // console.log(res.merge);  
                    if (res.merge != null && res.merge != "" && res.merge != undefined) {
                      // console.log(merge);  // [合并列数,合并行数,列号,行号]
                      // console.log(str[1],str[2]); // 当前要改变样式的 行号,列号
                      for (var x = 0; x < merge.length; x++) {
                        //					    			console.log("merge1.length="+merge1.length)
                        var str1 = merge[x].split("|")
                        // console.log(str1); 
                        // console.log(str[1],str1[2]);
                        //					    			console.log("merge1.length="+str[1]+">="+str1[2]+" "+str[1]+"<="+(parseInt(str1[2])+parseInt(str1[0])-1)+" "+ 
                        //					    				   str[2]+">="+str1[3]+" "+ str[2]+"<="+(parseInt(str1[3])+parseInt(str1[1])-1))
                        if (parseInt(str[1]) >= parseInt(str1[2]) && parseInt(str[1]) <= (parseInt(str1[
                            2]) + parseInt(str1[0]) - 1) &&
                          parseInt(str[2]) >= parseInt(str1[3]) && parseInt(str[2]) <= (parseInt(str1[3]) +
                            parseInt(str1[1]) - 1)) {
                          flag = 1;
                          cellName1 = jexcel.getColumnNameFromId([str1[2], str1[3]]);
                          //   console.log(cellName1); // 要合并的整号
                          //console.log(cellName1+"--"+jexcel.getColumnNameFromId([(parseInt(str1[2])+parseInt(str1[0])-1), (parseInt(str1[3])+parseInt(str1[1])-1)])+":"+kv[0].trim()+" "+kv[1].trim())
                          //console.log(kv[0].trim()=="color")
                          //console.log(styleMap[cellName1+'color']==undefined)
                          //console.log(kv[1].trim()!="rgb(0, 0, 0)")
                          if (kv[0].trim() == "color" && styleMap[cellName1 + 'color'] == undefined && kv[1]
                            .trim() != "rgb(0, 0, 0)") {
                            //console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
                            styleMap[cellName1 + 'color'] = 1
                            table.setStyle(cellName1, kv[0].trim(), kv[1].trim())
                            //break;
                          }
                          if (kv[0].trim() == "text-align" && styleMap[cellName1 + 'text-align'] ==
                            undefined) {
                            //console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
                            styleMap[cellName1 + 'text-align'] = 1
                            table.setStyle(cellName1, kv[0].trim(), kv[1].trim())
                            //break;
                          }
                          if (kv[0].trim() == "font-weight" && styleMap[cellName1 + 'font-weight'] ==
                            undefined) {
                            //console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
                            styleMap[cellName1 + 'font-weight'] = 1
                            table.setStyle(cellName1, kv[0].trim(), kv[1].trim())
                            //break;
                          }
                          if (kv[0].trim() == "font-size" && styleMap[cellName1 + 'font-size'] ==
                            undefined) {
                            //console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
                            styleMap[cellName1 + 'font-size'] = 1
                            table.setStyle(cellName1, kv[0].trim(), kv[1].trim())
                            //break;
                          }
                          if (kv[0].trim() == "background-color" && styleMap[cellName1] == undefined && kv[
                              1].trim() != "rgb(0, 0, 0)") {
                            //console.log("SETCOLOR--"+cellName1+":"+kv[0].trim()+" "+kv[1].trim())
                            styleMap[cellName1] = 1
                            table.setStyle(cellName1, kv[0].trim(), kv[1].trim())
                            //break;
                          }

                        }
                      }
                      //   console.log('----');
                      if (flag == 0) {
                        //console.log(cellName+":"+kv[0].trim()+" "+kv[1].trim())
                        table.setStyle(cellName, kv[0].trim(), kv[1].trim())
                      }
                    } else {
                      table.setStyle(cellName, kv[0].trim(), kv[1].trim())
                    }
                  } else if (kv[0].trim() != "border-style" && kv[0].trim() != "border-color" && kv[0]
                    .trim() + kv[1].trim() != "text-aligncenter") {
                    table.setStyle(cellName, kv[0].trim(), kv[1].trim())
                  }
                }
              }
            }
          }



        }
      });








    }




  });
</script>